.map-box-wrap {
  position: fixed;
  z-index: 9;
  width: 100vw;
  height: 100vh;
  left: 0;
  background-color: #1a232c;
  transition: all 1s;
  opacity: 0;

  &.open {
    top: 0;
    opacity: 1;
    z-index: 9999;
  }

  &.close {
    top: -200vw;
    opacity: 0;
    z-index: -9;
  }

  .map-box {
    height: 100%;
    width: 100%;

    &.draw {
      cursor: crosshair !important;
    }
  }

  .close-btn {
    position: absolute;
    top: 20px;
    right: 20px;
    cursor: pointer;
    color: var(--ant-color-primary);
    transition: all 0.5s;
    border: 1px solid var(--ant-color-primary);
    padding: 2px 6px;

    &:hover {
      transform: scale(1.5);
    }
  }

  .address-box {
    position: absolute;
    top: 20px;
    left: 20px;
    display: flex;
    align-items: center;
    flex-direction: column;
    background-color: #1a222c;
    color: #fff;
    padding: 16px;
    border-radius: 8px;

    .top-box,
    .bottom-box {
      width: 100%;
      margin-bottom: 16px;
      display: flex;
      align-items: center;
      justify-content: flex-start;
      width: 500px;
    }

    .input-box {
      display: flex;
      align-items: center;
      justify-content: flex-start;
      white-space: nowrap;

      &.location {
        .value {
          margin-right: 16px;
        }
      }

      &.address {
        .value {
          width: 440px;
          position: relative;

          .search-list {
            width: 100%;
            position: absolute;
            background-color: #1a222c;
            color: #fff;
            border: 1px solid #2551a7;
            bottom: -219px;
            left: 0;
            z-index: 11;
            height: 220px;
            overflow: auto;

            .search-item {
              padding: 4px 10px;
              cursor: pointer;
              transition: all 0.5s;
              font-size: 12px;

              .unit {
                color: #666;
              }

              &:hover {
                background-color: rgba(37, 81, 167, 0.18) !important;
              }
            }
          }
        }
      }

      .label {
        width: 60px;
        min-width: 60px;
        text-align: right;
      }
    }

    .btn-box {
      background-color: #00b0ff;
      display: flex;
      flex-direction: column;
      align-items: center;
      padding: 4px 10px;
      border-radius: 4px;
      color: #fff;
      cursor: pointer;
      transition: all 0.5s;

      &:hover {
        background-color: #1677ff;
      }
    }

    .item-search {
      background-color: #1a222c;

      .js-input {
        border: 1px solid #2551a7;
        border-radius: 6px;
        background-color: transparent !important;

        .ant-input,
        &.ant-input {
          background-color: transparent !important;
          color: #fff;
        }

        .ant-input-affix-wrapper {
          border: none;
          background-color: rgba(37, 81, 167, 0.18);
        }

        .ant-input-clear-icon {
          color: #41f1ee !important;
        }

        .ant-input-group-addon {
          background-color: transparent;

          .ant-btn {
            color: #41f1ee !important;
            background-color: rgba(37, 81, 167, 0.18);
            border: none;
            border-left: 1px solid #2551a7;
          }
        }
      }
    }
  }

  .tools-btn {
    position: absolute;
    top: 20px;
    left: 20px;
    cursor: pointer;
    transition: all 0.5s;
    display: flex;
    align-items: center;
    justify-content: center;

    .btn-draw,
    .btn-clear {
      margin-right: 16px;
      background-color: #00b0ff;
      display: flex;
      flex-direction: column;
      align-items: center;
      padding: 4px 10px;
      border-radius: 4px;
      color: #fff;
      cursor: pointer;
      transition: all 0.5s;

      .icon {
        font-size: 22px;
      }

      .title {
        margin-top: 2px;
        font-size: 14px;
      }
    }

    .btn-clear {
      &:hover {
        color: #ff7875;
        background-color: #fff2f0;
      }
    }

    .btn-draw {
      &:hover {
        background-color: #1677ff;
      }
    }
  }
}
